
//#2D333B

//#22272E

//#5470C6
<template>
  <body class="hello">
    <div class="Navigation">
      <h1 class="NavMsg1" style="color: #9d0707; width: 20%; margin-top: 1rem">学术</h1>
      <div class="NavLeft">
        <router-link class="navTo" to="/teacher">
          <h2 class="NavMsg">Home</h2>
        </router-link>
        <router-link class="navTo" to="/teacher/stu">
          <h2 class="NavMsg">Student</h2>
        </router-link>
      </div>
      <div>
        <a-modal :footer="null" v-model:open="visible" title="Detail">
          <div>
            <div>Id: </div>
            <div>{{id}}</div>
            <div>Uno: </div>
            <div>{{uno}}</div>
            <div>Role: </div>
            <div>{{map[role]}}</div>
            <div>Create Time: </div>
            <div>{{createTime}}</div>
            <div>Name: </div>
            <a-input  v-model:value="info.name" :placeholder="info.name" />
            <div>Gender: </div>
            <a-input  v-model:value="info.gender" :placeholder="info.gender" />
            <div>Age: </div>
            <a-input  v-model:value="info.age" :placeholder="info.age" />
            <div>Msg: </div>
            <a-textarea v-model:value="info.msg" :placeholder="info.msg" ></a-textarea>
            <a-button @click="updateUserDetail">Update</a-button>
          </div>
        </a-modal>
      </div>
      <div class="NavRight">
        <div class="avatar">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <img  src="@/assets/用户.png" alt="@/assets/用户.png">
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="visible = true">个人中心</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="logout">退出</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="down">
      <router-view></router-view>
    </div>
  </body>
</template>

<script setup>

import {onBeforeMount, ref} from "vue";
import {id_define, updateUser, userLogout} from "@/api/api";
import router from "@/router";

const visible = ref(false)

onBeforeMount(() => {
  id_define().then(res => {
    console.log(res.data)
    id.value = res.data.data.id
    uno.value = res.data.data.uno
    role.value = res.data.data.role
    createTime.value = res.data.data.createTime
    info.value = res.data.data.info
  })
})

const id = ref()
const uno = ref()
const role = ref()
const createTime = ref()
const info = ref()

const map = ["", "管理员", "教师", "学生"]

const updateUserDetail = () => {
  const postData = {
    id: id,
    uno: uno,
    role: role,
    createTime: createTime,
    info: {
      name: info.value.name,
      gender: info.value.gender,
      age: info.value.age,
      msg: info.value.msg,
    }
  }
  updateUser(postData).then(res => {
    console.log(res.data)
    location.reload()
  })
}

const logout = () => {
  userLogout().then(res => {
    console.log(res)
    localStorage.removeItem("token");
    router.push('/login')
  })

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.hello{
  width: 100%;
  height: 100%;
  margin: 0;
  .Navigation {
    display: flex;
    background-color: #2D333B;
    width: 100%;
    height: 5rem;
    .NavLeft{
      background-color: #2D333B;
      width: 50%;
      margin-left: 0;
      display: flex;
    }
    .NavRight{
      background-color: #2D333B;;
      height: 100%;
      width: 50%;
      text-align: right;

      .avatar{
        height: 4rem;
        img{
          margin-top: 0.6rem;
          border-radius: 100%;
          height: 4rem;
          object-fit: contain;
        }

        a-menu{
          background-color: #2C3E50;
        }
        a-menu-item{
          background-color: #2C3E50;
        }
      }
    }
  }

  .down{
    width: 100%;
    height: 100%;

  }
}
.navTo{
  margin-left: 13%;
  display: flex;
  align-items: end;
  text-decoration: none;
  color: #9AA4B1;

  &:hover{
    text-decoration: underline;
    color: cornflowerblue;
  }
}



</style>
